<template>
  <el-dialog title="导入头像" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="handleClose">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" status-icon>
        <el-form-item label="源目录" prop="srcFolder">
          <el-button @click="focusHandler">选择</el-button>
          <span>&nbsp;&nbsp;</span>
          {{ formData.srcFolder }}
          <input ref="inp" style="display: none;" type="file" webkitdirectory @change="changeHandler" />
          <div class="folderInfo">
            源目录应当包含所导入的照片
            <br />照片名称的格式应当为"员工编号_姓名.jpg" 例如：001_张三.jpg
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="getDepartmentList">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { CopyFiles } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      handleClose() {
        this.$refs.inp.value = ''
        this.close()
      },
      changeHandler(event) {
        let str = null
        let ind = null
        if (!event) {
          this.$message.error('源目录不能为空文件夹！')
        } else {
          str = event.target.files[0].path
          ind = str.lastIndexOf('\\')
          this.formData.srcFolder = str.slice(0, ind)
        }
      },
      focusHandler() {
        this.$refs.inp.click()
      },
      resetFormData() {
        this.formData = {
          srcFolder: '' // 源目录
        }
      },
      async getDepartmentList() {
        this.loadingSubmit = true
        try {
          if (!this.formData.srcFolder) {
            this.$message.warning('源目录不能为空文件夹！')
            this.loadingSubmit = false
            return
          }
          const result = await CopyFiles(this.formData)
          if (result.data == false) {
            const h = this.$createElement

            let newDatas = []
            let data = result.message.split('|')
            for (let i in data) {
              newDatas.push(h('p', null, data[i]))
            }
            this.$notify({
              title: '导入错误',
              message: h('div', null, newDatas),
              type: 'error'
            })
          } else {
            this.$emit("onsuccess")
            this.$message.success(result.message)
          }
          this.handleClose()
        } catch (err) {
          this.$message.error('导入失败！')
        }
        this.loadingSubmit = false
      }
    }
  }
</script>

<style lang="scss">
  .folderInfo {
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
    color: rgb(161, 161, 161);
  }
  .avatar-uploader {
    width: 100px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
  .el-upload--text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
</style>
